<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta charset="UTF-8">
	<title>分析决策/Analysis Resolution</title>
</head>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="layui/css/layui.css"  media="all">
<link rel="stylesheet" href="css/style.css">
<link href="css/jquery-ui.min.css" rel="stylesheet">
<style type="text/css">
	.ui-widget-header{
		background: #1581f3;
	}
	.ui-corner-all{
		/*border-radius: 5px 5px 0 0 ;*/
	}
	.slider{
		width: 500px;
		margin-bottom:40px;
		float: left;
	}
	.amount{
		margin-left: 20px;
		float: left;
	}
</style>
<body>
	<div class="nav">
		<div class="logo">
			<img src="images/logo.png" alt="">
		</div>
		<div class="nav_item  cur">
			<a class="service" href="product.html">服务中心</a>
		</div>
		<div class="nav_item ">
			<a class="account" href="">账户管理</a>
		</div>
		<div class="nav_item ">
			<a class="information" href="information.html">信息管理</a>
		</div>
	</div>
	<div class="navSide">
		<img src="images/sideIcon.png" alt="">
	</div>
	<div class="top clearfix">
		<span class="a_blue">分析决策/Analysis Resolution</span>
		<span class="fr">欢迎回来，<span class='username'></span>! <a class="user" href="###"><span>A</span><i class="top_down"></i></a></span>
		<div class="navDown">
			<ul>
				<li><a href="###" class="quit">退出</a></li>
			</ul>
		</div>
	</div>
	<div class="con">
		<div class="main bgrey clearfix">
			<div class="title">需求定向</div>
			<div class="left clearfix">
				<div class="city_direc clearfix">
					<div class="ltitle org"><span class="opcircle"><i class="orcircle"></i></span>城市定向<span class="tips">(*必选)</span></div>
					<div class="choosebox">
						<div class="acctitle">
							<span>国内</span>
							<span>国外</span>
						</div>
						<div class="accordionbox">
							<ul id="accordion" class="accordion">
								<!-- <li>
									<div class="province"><i class="addopen"></i>安徽</div>
									<ul class="submenu">
										<li class="subli">
											<span class="province2">合肥</span>
											<ul class="submenu3">
												<li>新疆维吾尔族自治区</li>
												<li>新疆维吾尔族自治区</li>
												<li>新疆维吾尔族自治区</li>
											</ul>
										</li>
										<li class="subli">
											<span class="province2">芜湖</span>
											<ul class="submenu3">
												<li>新疆维吾尔族自治区</li>
												<li>新疆维吾尔族自治区</li>
											</ul>
										</li>
									</ul>
								</li>
								<li>
									<div class="province"><i class="addopen"></i>澳门</div>
									<ul class="submenu">
										<li class="subli">
											<span class="province2">澳门特别行政区</span>
											<ul class="submenu3">
												<li>新疆维吾尔族自治区</li>

											</ul>
										</li>	
										<li class="subli">
											<span class="province2">芜湖</span>
											<ul class="submenu3">
												<li>新疆维吾尔族自治区</li>
												<li>新疆维吾尔族自治区</li>
											</ul>
										</li>		
									</ul>
								</li> -->
							</ul>
						</div>

					</div>
					<span class="add">添加</span>
					<div class="addbox">
						<div class="addtitle">*已添加<span class="num">0</span>个，还可以添加<span class="num">200</span>个<span class="empty">清空</span></div>
						<div class="addcase">
							
						</div>
					</div>
				</div>
				<div class="media clearfix">
					<div class="ltitle blue"><span class="opcircle"><i class="orcircle"></i></span>媒体定向</div>
					<div class="choosebox">
						<div class="acctitle">
							<span>媒体选择</span>
						</div>
						<div class="accordionbox">
							<ul id="accordion" class="accordion">
							</ul>
						</div>
					</div>
					<span class="add">添加</span>
					<div class="addbox">
						<div class="addtitle">*已添加<span class="num">0</span>个，还可以添加<span class="num">200</span>个<span class="empty">清空</span></div>
						<div class="addcase">
						</div>
					</div>
				</div>
				<div class="city_direc clearfix">
					<div class="ltitle org"><span class="opcircle"><i class="orcircle"></i></span>投放周期<span class="tips">(*必选)</span></div>
					<div class="putIndata">
						<div class="step_con clearfix">
							<label>
								<input checked="checked" type="radio" name="cycle">
								<span></span>
								连续购买
							</label>
							<label>
								<input type="radio" name="cycle">
								<span></span>
								接受余量
							</label>
							<div class="layui-form">
								<div class="layclear">
									<div class="layui-form">
										<div class="layui-form-item">
											<div class="layui-inline">
												<label class="layui-form-label">起止日期：</label>
												<div class="layui-input-inline">
													<input type="text" class="layui-input" id="test6" placeholder="">
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="budget clearfix">
					<div class="ltitle org"><span class="opcircle"><i class="orcircle"></i></span>预算输入<span class="tips">(*必选)</span></div>
					<div class="choosebox">
					</div>
					<div class="inall">
						<span>总预算：<b class="allbudget">0</b> 万元</span><span class="budgetempty empty">清空</span>
					</div>
				</div>
				<div class="crowd clearfix">
					<div class="ltitle blue"><span class="opcircle"><i class="orcircle"></i></span>人群类型</div>
					<div class="step_con clearfix">
						<div class="clearfix">
							<label>
								<input class="unlimited" checked="checked" type="radio" name="scale">
								<span></span>
								不限
							</label>
							<label>
								<input type="radio" name="scale">
								<span></span>
								自定义
							</label>
						</div>
						<div class="checkbox clearfix">
							<label>
								<input type="checkbox">
								<span></span>
								居住人群
							</label>
							<label>
								<input type="checkbox">
								<span></span>
								工作人群
							</label>
							<label>
								<input type="checkbox">
								<span></span>
								娱乐人群
							</label>
							<label>
								<input type="checkbox">
								<span></span>
								过路人群
							</label>
							<label>
								<input type="checkbox">
								<span></span>
								外省人群
							</label>
						</div>
					</div>

				</div>
				<div class="feature clearfix">
					<div class="ltitle blue"><span class="opcircle"><i class="orcircle"></i></span>人群特征</div>
					<div class="step_con clearfix">
						<span class="step_name fl">性别</span>
						<div class="clearfix">
							<label>
								<input class="unlimited sexinput" checked="checked" type="radio" name="sex">
								<span></span>
								不限
							</label>
							<label>
								<input type="radio" name="sex">
								<span></span>
								男
							</label>
							<label>
								<input type="radio" name="sex">
								<span></span>
								女
							</label>
						</div>

					</div>
					<div class="step_con clearfix">
						<span class="step_name fl">年龄</span>
						<div class="clearfix">
							<label>
								<input class="unlimited" checked="checked" type="radio" name="age">
								<span></span>
								不限
							</label>
							<label>
								<input class="ageRange" type="radio" name="age">
								<span></span>
								单年龄段
							</label>
						</div>
						<div class="checkbox clearfix">
							<!-- <div class="f-range">
								<div class="f-hk f-hk1" src="images/hk1.png"><span class="f-range-tips">100</span></div>
								<div class="f-hk f-hk4" src="images/hk4.png"><span class="f-range-tips">99</span></div>
							</div>
							<span class="AgeAdd"><span>锚点添加</span><i class="AddIcon"></i></span>
							<p class="f-rangeArea clearfix">
								<span class="Arealeft">100</span>
								<span class="Arearight">0</span>
							</p> -->
							<div class="agebox">
								<div class="ageSlider">
									<div class="slider"></div>
									<div class="amount" style="border:0; color:#000; font-weight:bold;">
										<span class="startAge">6</span>&nbsp;-&nbsp;<span class="endAge">7</span>
									</div>
								</div>
							</div>
							
							<span class="AgeAdd"><span>锚点添加</span><i class="AddIcon"></i></span>
						</div>
					</div>
					<div  class="step_con clearfix">
						<span class="step_name fl">受众学历</span>
						<div class="clearfix">
							<label>
								<input class="unlimited" checked="checked" type="radio" name="edu">
								<span></span>
								不限
							</label>
							<label>
								<input type="radio" name="edu">
								<span></span>
								自定义
							</label>
						</div>
						<div class="checkbox clearfix">
							<label>
								<input type="checkbox">
								<span></span>
								大专
							</label>
							<label>
								<input type="checkbox">
								<span></span>
								本科
							</label>
							<label>
								<input type="checkbox">
								<span></span>
								研究生
							</label>
							<label>
								<input type="checkbox">
								<span></span>
								博士
							</label>
						</div>
					</div>
					<div class="step_con clearfix">
						<span class="step_name fl">职业类别</span>
						<div class="clearfix">
							<label>
								<input class="unlimited" checked="checked" type="radio" name="profession">
								<span></span>
								不限
							</label>
							<label>
								<input type="radio" name="profession">
								<span></span>
								自定义
							</label>
						</div>
						<div class="checkbox clearfix">
							<label>
								<input type="checkbox">
								<span></span>
								低收入人群
							</label>
							<label>
								<input type="checkbox">
								<span></span>
								蓝领
							</label>
							<label>
								<input type="checkbox">
								<span></span>
								普通白领
							</label>
							<label>
								<input type="checkbox">
								<span></span>
								高级白领
							</label>
							<label>
								<input type="checkbox">
								<span></span>
								高收入人群
							</label>
						</div>
					</div>
					<div class="step_con clearfix">
						<span class="step_name fl">职业性质</span>
						<div class="clearfix">
							<label>
								<input class="unlimited" checked="checked" type="radio" name="proNature">
								<span></span>
								不限
							</label>
							<label>
								<input type="radio" name="proNature">
								<span></span>
								自定义
							</label>
						</div>
						<div class="checkbox clearfix">
							<label>
								<input type="checkbox">
								<span></span>
								自由职业者
							</label>
							<label>
								<input type="checkbox">
								<span></span>
								固定职业者
							</label>
						</div>
					</div>
					<div class="step_con clearfix">
						<span class="step_name fl">人生阶段</span>
						<div class="clearfix">
							<label>
								<input class="unlimited" checked="checked" type="radio" name="stage">
								<span></span>
								不限
							</label>
							<label>
								<input type="radio" name="stage">
								<span></span>
								自定义
							</label>
						</div>
						<div class="checkbox clearfix">
							<label>
								<input type="checkbox">
								<span></span>
								青少年
							</label>
							<label>
								<input type="checkbox">
								<span></span>
								未婚
							</label>
							<label>
								<input type="checkbox">
								<span></span>
								已婚未育
							</label>
							<label>
								<input type="checkbox">
								<span></span>
								已婚已育
							</label>
						</div>
					</div>
					<div class="step_con clearfix">
						<span class="step_name fl">应用偏好</span>
						<div class="clearfix">
							<label>
								<input class="unlimited" checked="checked" type="radio" name="preference">
								<span></span>
								不限
							</label>
							<label>
								<input type="radio" name="preference">
								<span></span>
								自定义
							</label>
						</div>
						<div class="preferenceInfo checkbox clearfix">
							<div class="choosebox">
								<div class="acctitle">
									<span>商业兴趣</span>
								</div>
								<div class="accordionbox">
									<!-- <ul id="accordion" class="accordion"> -->
										<ul class="submenu">
											<li><span>教育</span></li>
											<li><span>旅游</span></li>
											<li><span>金融</span></li>
											<li><span>汽车</span></li>
											<li><span>房产</span></li>
											<li><span>家居</span></li>
											<li><span>服饰鞋帽箱包</span></li>
											<li><span>餐饮美食</span></li>
											<li><span>生活服务</span></li>
											<li><span>商务服务</span></li>
										</ul>
										<!-- </ul> -->
									</div>
								</div>
								<span class="add">添加</span>
								<div class="addbox">
									<div class="addtitle">*已添加<span class="num">0</span>个，还可以添加<span class="num">200</span>个<span class="empty">清空</span></div>
									<div class="addcase">
									</div>
								</div>
							</div>
						</div>


					</div>

					<div class="worth clearfix">
						<div class="ltitle blue"><span class="opcircle"><i class="orcircle"></i></span>人口价值</div>
						<div class="step_con clearfix">
							<span class="step_name fl">收入水平</span>
							<div class="clearfix">
								<label>
									<input class="unlimited" checked="checked" type="radio" name="income">
									<span></span>
									不限
								</label>
								<label>
									<input type="radio" name="income">
									<span></span>
									自定义
								</label>
							</div>
							<div class="checkbox clearfix">
								<label>
									<input type="checkbox">
									<span></span>
									0~1200/月
								</label>
								<label>
									<input type="checkbox">
									<span></span>
									1200~2500/月
								</label>
								<label>
									<input type="checkbox">
									<span></span>
									2500~4000/月
								</label>
								<label>
									<input type="checkbox">
									<span></span>
									4000~6000/月
								</label>
								<label>
									<input type="checkbox">
									<span></span>
									6000以上/月
								</label>
							</div>
						</div>
						<div class="step_con clearfix">
							<span class="step_name fl">房产情况</span>
							<div class="clearfix">
								<label>
									<input class="unlimited" checked="checked" type="radio" name="house">
									<span></span>
									不限
								</label>
								<label>
									<input type="radio" name="house">
									<span></span>
									自定义
								</label>
							</div>
							<div class="checkbox clearfix">
								<label>
									<input type="checkbox">
									<span></span>
									有房
								</label>
								<label>
									<input type="checkbox">
									<span></span>
									无房
								</label>
							</div>
						</div>
						<div class="step_con clearfix">
							<span class="step_name fl">车产情况</span>
							<div class="clearfix">
								<label>
									<input class="unlimited" checked="checked" type="radio" name="car">
									<span></span>
									不限
								</label>
								<label>
									<input type="radio" name="car">
									<span></span>
									自定义
								</label>
							</div>
							<div class="checkbox clearfix">
								<label>
									<input type="checkbox">
									<span></span>
									有车
								</label>
								<label>
									<input type="checkbox">
									<span></span>
									无车
								</label>
							</div>
						</div>
					</div>
					<div class="famstructure clearfix">
						<div class="ltitle blue"><span class="opcircle"><i class="orcircle"></i></span>家庭结构</div>
						<div class="step_con clearfix">
							<span class="step_name fl">家庭成员数量</span>
							<div class="clearfix">
								<label>
									<input class="unlimited" checked="checked" type="radio" name="housenum">
									<span></span>
									不限
								</label>
								<label>
									<input type="radio" name="housenum">
									<span></span>
									自定义
								</label>
							</div>
							<div class="checkbox clearfix">
								<label>
									<input type="checkbox">
									<span></span>
									1口
								</label>
								<label>
									<input type="checkbox">
									<span></span>
									2口
								</label>
								<label>
									<input type="checkbox">
									<span></span>
									3口以上
								</label>
							</div>
						</div>
						<div class="step_con clearfix">
							<span class="step_name fl">家庭收入水平</span>
							<div class="clearfix">
								<label>
									<input class="unlimited" checked="checked" type="radio" name="famincome">
									<span></span>
									不限
								</label>
								<label>
									<input type="radio" name="famincome">
									<span></span>
									自定义
								</label>
							</div>
							<div class="checkbox clearfix">
								<label>
									<input type="checkbox">
									<span></span>
									10万以下/年
								</label>
								<label>
									<input type="checkbox">
									<span></span>
									10~20万/年
								</label>
								<label>
									<input type="checkbox">
									<span></span>
									20~30万/年
								</label>
								<label>
									<input type="checkbox">
									<span></span>
									30万以上/年
								</label>
							</div>
						</div>
					</div>
				</div>
				<div class="rightSide">
					<img src="images/sideIcon.png" alt="">
				</div>
				<div class="right">
					<h3>预选订单</h3>
					<div class="chooseinfo">
						<div><span class="orinfobox"><span class="ordtitle">国内城市：</span><span class="ordervar"></span><i class="off"></i></span></div>
						<div class="mediainfo clearfix"><span class="orinfobox"><span class="ordtitle">媒体类型：</span><span class="ordervar"></span><i class="off"></i></span></div>
						<div class="periodinfo"><span class="orinfobox"><span class="ordtitle">投放周期：</span><span class="ordervar"></span><i class="off"></i></span></div>
						<div><span class="orinfobox"><span class="ordtitle">总预算：</span><span class="ordervar budgetresult">0万元</span><i class="off"></i></span></div>
						<div><span class="orinfobox"><span class="ordtitle">人群类型：</span><span class="ordervar"><span>不限</span></span><i class="off"></i></span></div>
						<div class="featureinfo"><span class="orinfobox"><span class="ordtitle">人群特征：</span><span class="ordervar"><span>性别 不限</span>，<span id="ageInfo">年龄 不限</span>，<span>受众学历 不限</span>，<span>职业类别 不限</span>，<span>职业性质 不限</span>，<span>人生阶段 不限</span>，<span>应用偏好 不限</span>；</span><i class="off"></i></span></div>
						<div><span class="orinfobox"><span class="ordtitle">人口价值：</span><span class="ordervar"><span>收入水平不限，</span><span>房产情况不限，</span><span>车产情况不限</span></span><i class="off"></i></span></div>
						<div><span class="orinfobox"><span class="ordtitle">家庭结构：</span><span class="ordervar"><span>家庭成员数量不限，</span><span>家庭收入水平不限</span></span><i class="off"></i></span></div>
					</div>
					<a data-method="notice" href="###" class="found" id="found">创建订单</a>
				</div>

			</div>
		</div>
		<div class="cover_box">
			<div class="cover_inf demand_cover">
				<div class="cover_inf_title">
					确定订单
					<span>
						<img src="./images/close.png" alt="">
					</span>
				</div>
				<div id="cover_inf_content"></div>
				<div class="cover-btn">
					<a href="####" class="layui-layer-btn0">确定提交</a>
					<a href="####" class="layui-layer-btn1">返回编辑</a>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/ajax-information.js"></script>
	<script type="text/javascript" src="js/demand.js"></script>
	<script type="text/javascript" src="js/adaptation.js"></script>
	<script type="text/javascript" src="js/jquery-ui.min.js"></script>
	<script src="layui/layui.js" charset="utf-8"></script>
	<script>
		$( ".slider" ).slider({
			range: true,
			min: 6,
			max: 70,
			// values: [6,10 ],
			slide: function( event, ui ) {
				$(this).siblings(".amount" ).html( '<span class="startAge">'+ui.values[ 0 ]+"</span> - <span class='endAge'>"+ui.values[ 1 ]+'</span>' );

				$('#ageInfo>span').eq($(this).parents('.ageSlider').index()).html('<span class="startAge">'+ui.values[ 0 ]+"</span> - <span class='endAge'>"+ui.values[ 1 ]+'</span>')
			}
		});
		$('.AgeAdd').on('click',function() {
			$('#ageInfo').append(',<span><span class="startAge">6</span>&nbsp;-&nbsp;<span class="endAge">7</span></span>');
			$('.agebox').append(
				'<div class="ageSlider">'+
				'<div class="slider"></div>'+
				'<div class="amount" style="border:0; color:#000; font-weight:bold;"><span class="startAge">6</span>&nbsp;-&nbsp;<span class="endAge">7</span></div>'+
				'</div>')
			$( ".slider" ).slider({
				range: true,
				min: 6,
				max: 70,
				// values: [10, 20 ],
				slide: function( event, ui ) {
					$(this).siblings(".amount" ).html('<span class="startAge">'+ui.values[ 0 ]+"</span> - <span class='endAge'>"+ui.values[ 1 ]+'</span>');
				
					$('#ageInfo>span').eq($(this).parents('.ageSlider').index()).html('<span class="startAge">'+ui.values[ 0 ]+"</span> - <span class='endAge'>"+ui.values[ 1 ]+'</span>')
				}
			});
		})

</script>
</html>